<template>
  <div class="page">
    <!-- <el-upload
  class="upload-demo"
  drag
  action="http://81.68.251.102:7878/api/image/save"
  :http-request="change"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> -->
    <!-- <Top /> -->

    <el-card class="box-card">
      <p style="font-size: 20px; margin-top: 10px">Image Upload</p>
      <el-upload
        :http-request="change"
        action="http://81.68.251.102:7878/api/image/save"
        list-type="picture-card"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" style="object-fit: contain;"/>
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-card>
    <div class="tab" v-if="ShowTob">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="URL" name="first">
          <div
            class="box"
             v-clipboard:copy="URL"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >
            {{ URL }}
          </div>
        </el-tab-pane>
        <el-tab-pane label="HTML" name="second"
          ><div
            class="box"
            v-clipboard:copy="HTML"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >
            {{ HTML }}
          </div></el-tab-pane
        >
        <el-tab-pane label="bbCode" name="bbCode"
          ><div
            class="box"
            v-clipboard:copy="bbCode"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >
            {{ bbCode }}
          </div></el-tab-pane
        >
        <el-tab-pane label="Markdown" name="third"
          ><div
            class="box"
            v-clipboard:copy="Markdown"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >
            {{ Markdown }}
          </div></el-tab-pane
        >
        <el-tab-pane label="Markdown with link" name="fourth">
          <div
            class="box"
            v-clipboard:copy="Markdownlink"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >
            {{ Markdownlink }}
          </div></el-tab-pane
        >
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Menu from "./Menu.vue";
import Top from "./top.vue";
export default {
  data() {
    return {
      URL: "",
      HTML: "",
      bbCode: "",
      Markdown: "",
      Markdownlink: "",
      isCollapse: true,
      activeName: "first",
      ShowTob: false,
      data: {
        token: localStorage.getItem("token"),
        name: 12313,
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  mounted() {
    this.getlist();
  },
  
  methods: {
    onCopy({ value, event }) {
      //  this.$forceUpdate()
      // this.URL =123123124
      console.log("success", value);
      this.$message.success("已复制");
      //  this.$message({
      //       message: '恭喜你，这是一条成功消息',
      //       type: 'success'
      //     });
    },
    onError({ value, event }) {
      console.log("error", value);
    },
    clipboardErrorHandler({ value, event }) {
      console.log("error", value);
    },
    handleisshow() {
      this.isCollapse = !this.isCollapse;
    },
    change(file) {
      console.log(file.file);
      let formdata = new FormData();
      var config = {
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        headers: {
          "Content-Type":
            "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq",
        },
      };
      formdata.append("file", file.file);
      console.log(formdata);
      // formdata.name("name",123456)
      // formdata.token("token",localStorage.getItem("token"))
      this.$api
        .Upload(file.file.name, localStorage.getItem("token"), formdata, config)
        .then((res) => {
          if ((res.msg = "success")) {
            this.ShowTob = true;
            this.URL = `http://${res.data}`;
            this.HTML = `<img src="http://${res.data}" alt="${file.name}" title="${file.name}" />`;
            this.bbCode = `[img]http://${res.data}[/img]`;
            this.Markdown = `![21.png](http://${res.data})`;
            this.Markdownlink = `[![21.png](http://${res.data})](http://${res.data})`;
            // this.$forceUpdate()
            
          }
          console.log(res);
        });
    },
    getlist() {
      this.$api.Getlist(localStorage.getItem("token")).then((res) => {
        console.log(res);
      });
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  components: {
    Menu,
    Top,
  },
};
</script>

<style lang="less" scoped>
.page {
  margin: 0 auto;
}
.page .tab {
  width: 1000px;
  margin: 0 auto;
}
.page .tab .box {
  /* margin-top: 0.5 rem; */
  padding: 14px;
  border: 1 px solid #dadada;
  background-color: #f7f7f7;
  font-size: 15px;
  color: #555;
}

/deep/ .el-card .el-card__body {
  width: 800px;
}
/deep/ .el-card {
  width: 1000px;
  margin: 0 auto;
  margin-top: 50px;
}
</style>

